import React from 'react';
import { connect } from 'dva'
import * as PropTypes from 'prop-types';

import styles from "./style/indicators.less";

import Title from 'components/Title'
import Tools from '../../../utils/tools';

@connect(({ quality }) => ({ ...quality }))
class Quality extends React.Component {
  static defaultProps = {
    serverParams: {
        server: {
          tablename: 'zdwaterqualitydaily', // 每日水质
          payload: { where: "datatime >= (select max(CONVERT(DATETIME,CONVERT(VARCHAR,datatime,112))) from dbo.zdwaterqualitydaily)" },
        }
    },
  }

  componentDidMount() {
    this.init();
  }

  init = async () => {
    await this.setDateIndicators()
  }

  /**
   * 指标逻辑：每日水质与国标水质
   */
  setDateIndicators = async () => {
    const { serverParams } = this.props;
    this.queryIndicators(serverParams);
  }
  queryIndicators = async (params) => {
    const { server: payload } = params;
    await this.props.dispatch({
      type: 'quality/queryIndicators',
      payload
    })
  }

  // 水质检测
  renderInner(params){
    let { IndicatorsResource: dataSource } = this.props;
    let { value, unit } = params;
    unit = unit ? unit: '';
    return (<div className={styles.type}>
      {dataSource && (dataSource[value] || dataSource[value] === 0) && (
        <>
          <div className={styles.num}>{`${dataSource[value]}${unit}`}</div>
          {this.renderStandard(value, dataSource[value])}
        </>
      )}
    </div>)
}

  RenderIndicators = () => {
    const { props } = this;
    const { abstractList } = props;

      return (
        <div className={`${styles.Comm} clearfix`}>
        {
          abstractList.map((ele,index) =>{
            const { unit, label } = ele;
            return (
            <div key={index} className={`${styles.items} ${styles['col-8']}`}>
              <div className={styles.header}>
                <span>{label}{(unit && this.props.type === 2)? `(${unit})`:''}</span>
              </div>
              {this.renderInner(ele)}
            </div>)
          })
        }
      </div>
      );
  }

  renderStandard(field, value){
    const status = this.getStandard(field, value)
    
    const classNames = status ? styles.success : styles.error
    const text = status ? '合格' : '超标'
    
    return(<div className={`${styles.text} ${classNames}`}>{text}</div>)
  }

  getStandard(field, value){
    const exp = this.props.standardSource[field]
    let result = true;
    if(!exp) return;
    
    switch (field) {
      case 'PH':
          result = Tools.getExpressionRange(value, exp)
        break;
      case 'STINK':
          result = exp === value;
          break;
      default:
        result = Tools.getExpression(value, exp)
        break;
    }
    return result;
  }

  render() {
    // console.log(Tools.getExpression('<5','<=15'), 114)//true
    // console.log(Tools.getExpressionRange('8', '5.6-8.1')) // true

    return (
      <Title title='重点指标监控' style={{ 'padding': '2%' }}>
        {this.RenderIndicators()}
      </Title>
    )
  }
}

Quality.propTypes = {
  abstractList: PropTypes.array
}

export default Quality;
